<template>
    <div>
        
        <h1>房号信息列表</h1>
        <input
        type="button"
        value="批量删除"
        class="btn btn-danger"
        @click="delAll"
      />
      <input
        type="button"
        value="批量下架"
        class="btn btn-info"
        @click="updateAllState(1)"
      />
        <table class="table table-bordered">
          <tbody>
            <tr>
                <td><input type="checkbox" v-model="checked" @click="checkAll" />全选</td>
                <td>房型名称</td>
                <td>房间号码</td>
                <td>房间描述</td>
                <td>状态</td>
            </tr>
            <tr v-for="item in data.list" :key="item.id ">
                <td>   <input
              type="checkbox"
              :value="item.Id"
              v-model="ids"
              @change="checkOne"
            /></td>
                <td>{{ item.fangName }}</td>
                <td>{{ item.hao }}</td>
                <td>{{ item.miao }}</td>
                <td>{{ item.state?'下架':'上架' }}</td>
            </tr>
          </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import {reactive,ref,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
let data:any=reactive({});
let quinfo=reactive({

});
onMounted(()=>{
    show();
})
const show=()=>{
    axios({
        url:'https://localhost:7203/api/Fang/show',
        method:'get',
        params:quinfo
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
let checked = ref(false);
let ids = ref([]);
const checkOne = () => {
  if (ids.value.length == data.list.length) {
    checked.value = true;
  } else {
    checked.value = false;
  }
};

const checkAll = () => {
  if (checked.value == true) {
    checked.value = false;
  } else {
    checked.value = true;
  }
  if (checked.value == true) {
    ids.value = data.list.map((item: any) => {
      return item.Id;
    });
  } else {
    ids.value = [];
  }
};
const updateAllState = (state: any) => {
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  axios({
    url: 'https://localhost:7003/api/Fang/UpdateAllUserState',
    method: 'put',
    params: {
      ids: ids.value.toString(),
      state: state,
    },
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        checked.value = false;
        ids.value = [];
        show();
      } else {
        alert('修改失败');
        checked.value = false;
        ids.value = [];
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const delAll = () => {
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }

  var f = confirm('请问确定要删除码？');
  if (f) {
    axios({
      url: 'https://localhost:7203/api/Fang/DelAllUser',
      method: 'delete',
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          checked.value = false;
          show();
        } else {
          alert('删除失败');
          checked.value = false;
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
</script>

<style scoped>

</style>